<template>
  <el-dialog title="导入模型" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <div class="j-new-resources-body">
      <el-form ref="form" label-width="80px">
        <el-form-item label="选择模型">
          <el-select v-model="index" placeholder="请选择类型">
            <el-option :label="item.title" :value="index" v-for="(item,index) in models" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择字段" v-if="fields.length">
          <el-checkbox-group v-model="selected">
            <el-checkbox :label="index" name="type" v-for="(item,index) in fields" :key="index">{{item.title}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleAffirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script type="text/javascript">
export default {
  props: {
    value: [Array, Object, Number, String]
  },
  data() {
    return {
      index: "",
      fields: [],
      selected: [],
      dialogVisible: false,
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    models: function(argument) {
      return this.value.models
    },
    attribute: function(argument) {
      return this.value.attribute
    }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    index(value) {
      this.fields = this.models[value].fields;
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    /**
     * 确认创建
     */
    handleAffirm() {
      let index = this.index;
      let models = {
        title: this.models[index].title,
        name: this.models[index].name,
        fields: []
      };
      for (let i in this.selected) {
        let key = this.selected[i];
        let item = this.fields[key];
        models.fields.push(item);
      }
      this.attribute.models.push(models);
      this.dialogVisible = false;
    }
  }
}

</script>
<style type="text/css" lang="scss">
</style>
